<template>
  <div class="home-view">
    <a-spin :spinning="loading" :tip="loadingTip" :delay="0.5">
      <a-icon slot="indicator" type="sync" style="font-size: 24px;" spin />
      <Block
        style="height: 100%;"
        :default-layout="[
          {
            flex: 1,
            cols: [{ width: 500, showUnfoldBtn: true }, { flex: 1 }],
          },
        ]"
      >
        <Row>
          <Col style="transition: width 0.1s;">
            <data-source-config @analytic="analytic" />
          </Col>
          <Col>
            <lineage-analytic-result />
          </Col>
        </Row>
      </Block>
    </a-spin>
  </div>
</template>

<script lang="ts">
/**
 * home view
 */
import { Component, Vue } from 'vue-property-decorator'
import DataSourceConfig from '@/components/home/DataSourceConfig.vue'
import LineageAnalyticResult from '@/components/home/LineageAnalyticResult.vue'
import { Block, Row, Col } from '@jianweife/lowcode-index'
import '@jianweife/lowcode-index/dist/jianweiComponents.css'
import DataLineage from '@/store/modules/data-lineage'

@Component({
  components: {
    Block,
    Row,
    Col,
    DataSourceConfig,
    LineageAnalyticResult,
  },
})
export default class HomeView extends Vue {
  private get loading() {
    return DataLineage.loading
  }
  private get loadingTip() {
    return DataLineage.loadingTip
  }

  public mounted() {}

  public analytic() {
    DataLineage.setLoading(true)
    setTimeout(() => {
      DataLineage.setLoading(false)
    }, 3000)
  }
}
</script>

<style lang="less" scoped>
@import '../../styles/constants';

.home-view {
  background-color: @VIEW_BACKGROUND_COLOR;
  height: 100%;
  width: 100%;

  :deep(.ant-spin-nested-loading) {
    height: 100%;

    .ant-spin-container {
      height: 100%;
    }
  }
}
</style>
